<template>
  <el-dialog
    :title="title"
    :visible="visible"
    :width="width"
    :center="center"
    :modal="modal"
    append-to-body
    top="0"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleDialgAction('close')"
    type
  >
    <div class="wf-dialog-content">
      <slot />
    </div>
    <div
      class="wf-dialog-footer"
      :class="{ 'text-center': actionCenter }"
      slot="footer"
    >
      <slot name="action">
        <m-button
          :loading="pending"
          class="w-80"
          v-if="showSaveButton"
          @click="handleDialgAction('stage')"
          >{{ saveButtonText }}</m-button
        >
        <m-button
          :loading="pending"
          class="w-80"
          v-if="showConfirmButton"
          @click="handleDialgAction('confirm')"
          >{{ confirmButtonText }}</m-button
        >
        <m-button
          class="w-80"
          v-if="showCancelButton"
          @click="handleDialgAction('close')"
          >{{ cancelButtonText }}</m-button
        >
      </slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "MDialogFull",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "提示",
    },
    width: {
      type: String,
      default: "100%",
    },
    center: {
      type: Boolean,
      default: false,
    },
    modal: {
      type: Boolean,
      default: true,
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
    cancelButtonText: {
      type: String,
      default: "confirmar",
    },
    showConfirmButton: {
      type: Boolean,
      default: true,
    },
    confirmButtonText: {
      type: String,
      default: "提交",
    },
    showSaveButton: {
      type: Boolean,
      default: false,
    },
    saveButtonText: {
      type: String,
      default: "暂存",
    },
    actionCenter: {
      type: Boolean,
      default: true,
    },
    pending: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pendingFlag: false,
    };
  },
  methods: {
    handleDialgAction(type) {
      if (!this.visible) return;
      this.$emit(type);
    },
  },
};
</script>

<style>
.el-button--primary {
  background-color: #fb7566 !important;
  border-color: #fb7566 !important;
  outline: none !important;
}
.el-dialog__headerbtn {
  outline: none !important;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fb7566 !important;
}
</style>

<style lang="scss" scoped>
::v-deep {
  .el-dialog {
    margin-bottom: 0 !important;
  }
  .el-dialog__header {
    background-color: #f5f5f5;
    .el-dialog__title {
      font-weight: 600;
      color: var(--theme-color);
    }
  }
  .el-dialog__body {
    height: calc(100vh - 62px - 63px);
    overflow-y: auto;
  }
  .el-dialog__footer {
    background-color: #f5f5f5;
  }
}
</style>
